<template>
    <div class="expandRow">

        <!--课程封面-->
        <div class="cover">
            <img :src="row.subPic" @click="goCommunity(row.subCommunityUrl)">
        </div>

        <!--课程标题-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程标题:
            </Card>
            <Card class="cont">
                {{row.subName}}
            </Card>
        </div>

        <!--课程id-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程 Id:
            </Card>
            <Card class="cont">
                {{row.subjectId}}
            </Card>
            <Card class="cont">
                <Button size="small" type="info" @click="refresh(row.subjectId)">刷新</Button>
            </Card>
        </div>

        <!--课时总数-->
        <div class="box">
            <Card class="card title" dis-hover>
                课时总数:
            </Card>
            <Card class="cont">
                {{row.subTotal}}
            </Card>
        </div>

        <!--课程评分-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程评分:
            </Card>
            <Card class="cont score">
                {{row.subScore}}

                <el-rate disabled
                         allow-half
                         v-model="row.subScore"
                         :low-threshold=1.5
                         :high-threshold=3
                         style="margin:2px 0px 0px 16px;float: right"
                         :colors="['#99A9BF', '#F7BA2A', '#FF9900']">
                </el-rate>
            </Card>
        </div>

        <!--会员类型-->
        <div class="box">
            <Card class="card title" dis-hover>
                会员类型:
            </Card>
            <div class="cont img">
                <img v-if="row.vip==1" src="../../assets/course/vip.svg" class="vip">
                <img v-if="row.vip==0" src="../../assets/course/all.svg" class="all">
            </div>
        </div>

        <!--课程状态-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程状态:
            </Card>
            <Card class="cont">
                <i-switch v-model="row.status"
                          size="large"
                          disabled
                          :true-value="1"
                          :false-value="0"
                          false-color="#ff4949">
                    <span slot="open">ON</span>
                    <span slot="close" style="font-size: 14px">OFF</span>
                </i-switch>
            </Card>
        </div>

        <!--教师-->
        <div class="box">
            <Card class="card title" dis-hover>
                授课教师:
            </Card>
            <Card class="cont" v-for="(obj,i) in tchList" :key="i">
                {{obj}}
            </Card>
        </div>

        <!--qq群-->
        <div class="box">
            <Card class="card title" dis-hover>
                qq交流群:
            </Card>
            <Card class="cont" v-for="(obj,i) in qqList" :key="i">
                {{obj}}
            </Card>
        </div>

        <!--课程简介-->
        <div class="box">
            <Card class="card title" dis-hover>
                课程简介:
            </Card>
            <Card class="card introduction">
                {{row.subIntroduction}}
            </Card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "",
        props: {
            row: Object
        },
        components: {},
        data() {
            return {
                //授课教师
                tchList: [],
                //qq交流群
                qqList: [],
            }
        },
        methods: {
            //点击图片去社区
            goCommunity: function (communityUrl) {
                this.$Message.error({
                    background: true,
                    closable: true,
                    duration: 2,
                    content: '跳转社区正在玩命开发中...'
                });

                /*let {href} = this.$router.resolve({
                   name: "CourseList",
                   query: {
                       sid: obj.subjectId
                   }
               });
               window.open(obj, '_blank');*/
            },
            //处理数组
            handleStr2Arr: function (str) {
                let arr = []
                let split = str.split(";");
                for (let i = 0; i < split.length; i++) {
                    arr.push(split[i])
                }
                return arr;
            },
            shuffle: function () {
                let subTeacher = this.row.subTeacher;
                this.tchList = this.handleStr2Arr(subTeacher);
                let qqGroup = this.row.qqGroup;
                this.qqList = this.handleStr2Arr(qqGroup);
            },
            refresh:function (subjectId) {
                this.axios.get(`/course/subject/refresh/${subjectId}`)
                    .then((data) => {
                        if (data.code == 200) {
                            this.$Message.success({
                                background: true,
                                closable: true,
                                duration: 2,
                                content: '刷新成功'
                            });
                        }
                    })
            }
        },
        mounted() {
            this.shuffle()
        }
    }
</script>

<style scoped>
    /*盒子 防止子元素浮动*/
    .expandRow .box {
        overflow: hidden;
        margin-top: 8px;
    }

    /*课程封面*/
    .expandRow .cover {
        float: right;
    }

    /*封面图片*/
    .expandRow .cover img {
        display: inline-block;
        width: 524px;
        height: 288px;
    }

    /*card 浮动*/
    .expandRow .card,
    .expandRow .cont {
        float: left;
        margin-left: 5px;
    }

    /*左侧标题*/
    .expandRow .box .title {
        width: 108px;
        font-weight: bold;
    }

    /*会员类型 盒子*/
    .expandRow .box .score {
        color: #FF0000;
    }

    /*会员类型 盒子*/
    .expandRow .box .img {
        height: 56px;
    }

    /*card vip用户*/
    .expandRow .box img.vip {
        display: inline-block;
        width: 70px;
        height: 56px;
        margin-left: 5px;
    }

    /*card 所有用户 all*/
    .expandRow .box img.all {
        display: inline-block;
        width: 70px;
        height: 46px;
        margin-top: 5px;
    }

    /*card 简介*/
    .expandRow .box .introduction {
        min-width: 600px;
        max-width: calc(100% - 120px);
    }
</style>